<!-- 视频播放器：LivePlayer H5播放器 -->
<!-- 参考：https://www.liveqing.com/docs/manuals/LivePlayer.html -->
<template>
  <LivePlayer :videoUrl="videoUrl" live waterMark="安全生产监控摄像头实时视频演示" />
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
  import LivePlayer from '@liveqing/liveplayer-v3';

  export default defineComponent({
    name: 'LiveQingPlayer',
    props: {
      // videoUrl: {
      //   //播放的视频文件完整url
      //   type: String as PropType<string>,
      // },
    },
    components: { LivePlayer },
    setup(props, { emit }) {
      console.log('LiveQingPlayer setup props', props);

      //测试地址，2025-6-25实测结果：可播放（HLS、FLV、WebRTC、WSFlv）不可播放（RTMP）
      const testHlsUrl =
        'http://36.134.74.203:10000/sms/34025323282020000001/hls/34025323281110000007_34025323281320000014/34025323281110000007_34025323281320000014_live.m3u8';
      const testFlvUrl =
        'http://36.134.74.203:10000/sms/34025323282020000001/flv/hls/34025323281110000007_34025323281320000014.flv';
      const testRtmpUrl =
        'rtmp://36.134.74.203:11935/hls/34025323281110000007_34025323281320000014';
      const testWebRtcUrl =
        'webrtc://36.134.74.203:10000/sms/34025323282020000001/rtc/34025323281110000007_34025323281320000014';
      const testWsFlvUrl =
        'ws://36.134.74.203:10000/sms/34025323282020000001/ws-flv/hls/34025323281110000007_34025323281320000014.flv';

      const videoUrl = ref<string>(testWsFlvUrl);

      onMounted(() => {
        console.log('LiveQingPlayer onMounted props', props);
      });

      onUnmounted(() => {
        console.log('LiveQingPlayer onUnmounted');
      });

      return {
        videoUrl,
      };
    },
  });
</script>
<style scoped></style>
